<template>
    <div >
        <div style="flex: 1;padding: 20px 20px">
            <div>
                <div>
                    <el-button size="small" @click="show" type="primary">新增</el-button>
                    <!--                        <el-button size="small" type="primary">新增</el-button>-->


                </div>
                <div style="display: flex;justify-content: center;align-items: center">
                    <el-input v-model="search" style="width: 30%;margin-right: 10px">查询</el-input>
                    <el-button size="small" @keypress="load" type="primary">查询</el-button>


                </div>
            </div>
            <!--                <div   style="display: flex" >-->
            <!--                    <el-form  ref="form" :model="form" label-width="500px">-->
            <!--                        <el-form-item >-->
            <!--                                <el-input style="width: 300px;margin-right: 10px">11</el-input>-->

            <!--                        </el-form-item>-->

            <!--                    </el-form>-->
            <!--                    <el-button style="width: 50px;height: 40px"    size="small" type="primary">查询</el-button>-->

            <!--                </div>-->

            <el-table
                    stripe
                    border
                    fit
                    :data="tableData"
                    size="mini"
                    style="width: 100%">

                <el-table-column
                        prop="id"
                        label="Id"
                >
                </el-table-column>
                <el-table-column
                        prop="nickName"
                        label="姓名"
                >
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄">
                </el-table-column>


                <el-table-column
                        label="头像"
                >

                    <template slot-scope="scope">
                        <el-image
                                style="width: 100px; height: 100px"
                                :src="'http://'+scope.row.avatar"
                                :preview-src-list="['http://'+scope.row.avatar]">
                            >
                        </el-image>
                    </template>

                </el-table-column>
                <!--                    <el-table-column-->
                <!--                            prop="age"-->
                <!--                            label="avatar">-->
                <!--                    </el-table-column>-->
                <el-table-column
                        fixed="right"
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="primary" size="mini">修改</el-button>
                        <el-button type="danger" @click="delete1(scope.row)" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageNum"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="50%"
        >
            <el-form label-width="50px">
                <el-form-item label="昵称">
                    <el-input v-model="form.nickName" style="width: 50%"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age" style="width: 50%"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input style="width: 50%" v-model="form.address"></el-input>
                </el-form-item>
                <!--                    <div id="div1"></div>-->
                <el-upload
                        class="upload-demo"
                        action="http://localhost:9090/files/upload/"
                        multiple
                        :limit="3"
                        :on-success="upload"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import E from 'wangeditor'

    import Header from "../components/Header";
    import axios from 'axios'

    export default {
        components: {},
        created() {
            this.load()
        },
        watch:{
            search:function f(newval,oldval) {
                this.search=newval
                this.load()
            },
            dialogVisible:function () {
                if (this.dialogVisible===false){
                    this.form={}

                }
            }
        }
        ,
        data() {

            return {
                form: {}
                ,
                dialogVisible: false
                ,
                tableData: [],
                currentPage4: 1,
                // , currentPage: 1,
                pageNum: 5,
                total: 1,
                search: "",
                url:"",
                srcList:[]
            }

        },
        methods: {
            delete1(row){
                axios.delete('http://localhost:9090/user?id='+row.id).then(res => {
                    console.log(res)
                    if (res.data.code==="0"){
                        this.$message({
                            type:"success",
                            message:"删除成功"
                        })
                    }else {
                        this.$message({
                            type:"error",
                            message:"删除失败"
                        })
                    }
                })
                this.load()
            }
            ,
            handleClick(val){
                this.dialogVisible=true
                this.form=JSON.parse(JSON.stringify(val))
                // this.save(val)
                console.log(val)
            }
            ,
            upload(response, file, fileList) {
                // console.log(response)
                console.log(response)
                console.log(111)
                this.form.avatar = response.data
            }
            ,
            show() {
                this.dialogVisible = true
            },
            save() {
                // this.dialogVisible=true
                if (!this.form.id){
                    axios.post('http://localhost:9090/user', this.form).then(res => {
                        console.log(res)
                        if (res.data.code==="0"){
                            this.$message({
                                type:"success",
                                message:"新增成功"
                            })
                        }else {
                            this.$message({
                                type:"error",
                                message:"新增失败"
                            })
                        }
                    })
                }else {   // 有id的话就是修改操作
                    axios.put('http://localhost:9090/user', this.form).then(res=>{
                        if (res.data.code==="0"){
                            this.$message({
                                type:"success",
                                message:"修改成功"
                            })
                        }else {
                            this.$message({
                                type:"error",
                                message:"修改失败"
                            })
                        }
                    })
                }
                this.load()
                this.dialogVisible = false
            },

            handleCurrentChange(val) {
                console.log(val)
                this.currentPage4 = val
                this.load()
            }
            , handleSizeChange(val) {
                console.log(val)
                this.pageNum = val
                this.load()

            }
            ,
            load() {
                axios.get('http://localhost:9090/user', {
                    params: {
                        search: this.search,
                        PageNum: this.pageNum,
                        sizePage: this.currentPage4
                    }
                }).then(res => {
                    console.log(res)
                    this.srcList="res.data.data.records.avatar"
                    this.tableData = res.data.data.records
                    this.total=res.data.data.total

                })
            }
        }
    }
</script>

<style scoped>

</style>